import React, { useState } from 'react'
import { useEffect } from 'react'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'
import * as useActionCreators from '../store/actionCreators/user'

function Setting(props) {
	const { user, logout, updateUser } = props
	const [ image, setImage ] = useState('')
	const [ userName, setUserName ] = useState('')
	const [ bio, setBio ] = useState('')
	const [ email, setEmail ] = useState('')
	const [ password, setPassword ] = useState('')
	const history = useHistory()
	useEffect(() => {
		if (user && user.username) {
			setImage(user.image || '')
			setUserName(user.username || '')
			setBio(user.bio || '')
			setEmail(user.email || '')
		}
	}, [user])

	const submit = (e) => {
		e.preventDefault()
		updateUser(history, {
			image,
			userName,
			bio,
			email,
			password
		})
		return false
	}

	return (
		<div className="settings-page">
			<div className="container page">
				<div className="row">

					<div className="col-md-6 offset-md-3 col-xs-12">
						<h1 className="text-xs-center">Your Settings</h1>

						<form>
							<fieldset>
								<fieldset className="form-group">
									<input
										value={image}
										className="form-control"
										type="text"
										onChange={e => setImage(e.target.value)}
										placeholder="URL of profile picture" />
								</fieldset>
								<fieldset className="form-group">
									<input
										value={userName}
										onChange={e => setUserName(e.target.value)}
										className="form-control form-control-lg"
										type="text"
										placeholder="Your Name" />
								</fieldset>
								<fieldset className="form-group">
									<textarea
										value={bio}
										onChange={e => setBio(e.target.value)}
										className="form-control form-control-lg"
										rows="8"
										placeholder="Short bio about you" />
								</fieldset>
								<fieldset className="form-group">
									<input
										value={email}
										onChange={e => setEmail(e.target.value)}
										className="form-control form-control-lg"
										type="text"
										placeholder="Email" />
								</fieldset>
								<fieldset className="form-group">
									<input
										className="form-control form-control-lg"
										type="password"
										onChange={e => setPassword(e.target.value)}
										value={password}
										placeholder="Password" />
								</fieldset>
								<button className="btn btn-lg btn-primary pull-xs-right" onClick={e => submit(e)}>
									Update Settings
								</button>
							</fieldset>
							<hr />

              <button
                className="btn btn-outline-danger" onClick={e => logout(history)}>
                Or click here to logout.
              </button>
						</form>
					</div>

				</div>
			</div>
		</div>
	)
}

const mapStateToProps = state => ({
	user: state.user.user || {}
})

const mapDispatchToProps = dispatch => ({
	logout: history => {
    dispatch(useActionCreators.logout(history))
  },
	updateUser: (history, payload) => {
		dispatch(useActionCreators.updateUser(history, payload))
	}
})

export default connect(mapStateToProps, mapDispatchToProps)(Setting)